<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="assets/images/favicon.png" type="image/png">
    <title>Genzik</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/slick.css">
    <link rel="stylesheet" type="text/css" href="assets/css/select2.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/fancybox.css">
    <link rel="stylesheet" type="text/css" href="assets/css/aos.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <link rel="stylesheet" type="text/css" href="assets/css/customefont.css">
    <link rel="stylesheet" type="text/css" href="assets/css/responsive.css">
</head>

<body>

    <!-- Preloader -->
    <div id="preloader">
        <div id="ctn-preloader" class="ctn-preloader">
            <div class="animation-preloader">
                <div class="spinner"></div>
                <div class="txt-loading">
                    <span data-text-preloader="L" class="letters-loading">
                        L
                    </span>
                    <span data-text-preloader="O" class="letters-loading">
                        O
                    </span>
                    <span data-text-preloader="A" class="letters-loading">
                        A
                    </span>
                    <span data-text-preloader="D" class="letters-loading">
                        D
                    </span>
                    <span data-text-preloader="I" class="letters-loading">
                        I
                    </span>
                    <span data-text-preloader="N" class="letters-loading">
                        N
                    </span>
                    <span data-text-preloader="G" class="letters-loading">
                        G
                    </span>
                </div>
            </div>
            <div class="loader-section section-left"></div>
            <div class="loader-section section-right"></div>
        </div>
    </div>
    <header class="position-relative style-one">
        <div class="topbar-wrapper style-one">
            <div class="container">
                <div class="topbar-inner-wrapper d-flex align-items-center">
                    <div class="topbar-item position-relative">
                        <div class="topbar-inner-item d-flex align-items-center">
                            <div class="item-icon">
                                <i class="icon-free-delivery"></i>
                            </div>
                            <div class="item-content">
                                <span>FREE shipping 
                                    <bdi> on US$39.00+</bdi>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="topbar-item position-relative">
                        <div class="topbar-inner-item d-flex align-items-center">
                            <div class="item-icon">
                                <i class="icon-return"></i>
                            </div>
                            <div class="item-content">
                                <span>Free Returns 
                                    <bdi>in 10 days</bdi>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="topbar-item position-relative">
                        <div class="topbar-inner-item d-flex align-items-center">
                            <div class="item-icon">
                                <i class="icon-phone-4"></i>
                            </div>
                            <div class="item-content">
                                <span>+34640225587</span>
                            </div>
                        </div>
                    </div>
                    <div class="currency-dropdown position-relative">
                        <select class="currency-selection" name="state">
                            <option value="USD">SUSD</option>
                            <option value="PKR">PKR</option>
                        </select>
                    </div>
                    <div class="header-action-items">
                        <ul class="d-flex align-items-center">
                            <li class="login position-relative">
                                <a href="login.html">
                                    <i class="icon-icon-login"></i>
                                </a>
                            </li>
                            <li class="wishlist position-relative">
                                <a href="wishlist.html">
                                    <i class="icon-like"></i>
                                </a>
                            </li>
                            <li class="search">
                                <a href="#" data-bs-toggle="modal" data-bs-target="#searchpopup">
                                    <i class="icon-search"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="topbar-item d-flex align-items-center">
                        <div class="item-content">
                            <span>Follow Us:</span>
                        </div>
                        <div class="social-icons">
                            <ul class="d-flex align-items-center">
                                <li>
                                    <a href="https://www.facebook.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                        <i class="fa-brands fa-facebook"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://www.twitter.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                        <i class="fa-brands fa-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="https://pk.linkedin.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                        <i class="fa-brands fa-linkedin"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-mid-wrapper style-one">
            <div class="container">
                <div class="header-mid-inner d-flex align-items-center justify-content-between">
                    <div class="header-currency-search d-flex align-items-center">
                        <div class="currency-dropdown position-relative">
                            <select class="currency-selection" name="state">
                                <option value="USD">SUSD</option>
                                <option value="PKR">PKR</option>
                            </select>
                        </div>
                        <div class="search-menu">
                            <a href="#" data-bs-toggle="modal" data-bs-target="#searchpopup" class="text-uppercase d-flex align-items-center">
                                <i class="icon-search"></i>Search
                            </a>
                        </div>
                    </div>

                    <div class="logo-wrapper logo">
                        <h1>
                            <a href="#" class="d-flex align-items-center">
                                <img src="assets/images/logo.png" alt="logo">Genzik
                            </a>
                        </h1>
                    </div>

                    <div class="header-action-items">
                        <ul class="d-flex align-items-center">
                            <li class="login position-relative">
                                <a href="login.html">
                                    <i class="icon-icon-login"></i>
                                </a>
                            </li>
                            <li class="wishlist">
                                <a href="wishlist.html">
                                    <i class="icon-like"></i>
                                </a>
                            </li>
                            <li class="cart">
                                <a href="#" class="d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#cart-popup" aria-controls="cart-popup">
                                    <span class="d-inline-flex align-items-center justify-content-center position-relative">
                                        <i class="icon-basket"></i>
                                        <sup class="cart-nmbr d-inline-flex align-items-center justify-content-center position-absolute">1</sup>
                                    </span>
                                    <span>$14.00 (1 item)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-bottom-wrapper">
            <div class="container">
                <div class="header-bottom-inner d-flex align-items-center justify-content-between">
                    <div class="menu_bar">
                        <a href="#" class="mobile-menu-icon">
                            <div></div>
                            <div></div>
                            <div></div>
                        </a>
                    </div>
                    <div class="logo-wrapper logo">
                        <h1>
                            <a href="#" class="d-flex align-items-center">
                                <img src="assets/images/logo.png" alt="logo">Genzik
                            </a>
                        </h1>
                    </div>
                    <div class="header-action-items">
                        <ul class="d-flex align-items-center">
                            <li class="cart">
                                <a href="#" class="d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#cart-popup" aria-controls="cart-popup">
                                    <span class="d-inline-flex align-items-center justify-content-center position-relative">
                                        <i class="icon-basket"></i>
                                        <sup class="cart-nmbr d-inline-flex align-items-center justify-content-center position-absolute">1</sup>
                                    </span>
                                    <span>$14.00 (1 item)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navigation-wrapper d-flex justify-content-between">
                    <div class="side-navigation">
                        <a href="#" class="cross-btn d-inline-flex align-items-center justify-content-center position-absolute">
                            <i class="fa-solid fa-xmark"></i>
                        </a>
                        <div class="logo text-center">
                            <h1>
                                <a href="#">
                                    <img src="assets/images/logo.png" alt="logo">
                                    Genzik
                                </a>
                            </h1>
                        </div>
                        <!--end-logo-->
                    </div>
                    <nav class="menu" id="nav-menu">
                        <ul class="menu-main">
                            <li class="menu-item current-menu-item menu-item-has-children position-relative">
                                <a href="javascript:void(0)" class="position-relative">Home </a>
                                <ul class="sub-menu position-absolute">
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="index.html" class="nav-link">Home One</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="index2.html" class="nav-link">Home Two</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="index3.html" class="nav-link">Home Three</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item menu-item-has-children megamenu-dropdown">
                                <a href="javascript:void(0)" class="position-relative">Clothes</a>
                                <div class="megamenu-wrapper">
                                    <div class="container">
                                        <div class="megamenu-inner">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>Everything</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">Activewear</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Intimates &amp; Loungewear</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Jumpsuits &amp; Rompers</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Matching Sets</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Swimwear</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Unisex</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>What’s Hot</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">Tops</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Blouses &amp; Shirts</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Tank Tops &amp; Camis</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Sweatshirt &amp; Hoodies</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>Featured Shop</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">Denim Dresses</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Denim Jackets</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Denim Jumpsuits</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Denim Shorts &amp; Skirts</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Denim Tops</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="sale-box text-center position-relative">
                                                        <h4 class="text-uppercase">40% off Your Purchase</h4>
                                                        <a href="product-list2.html" class="sale-box-link text-uppercase">Show Now</a>
                                                        <div class="sale-border position-absolute"></div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            
                            <li class="menu-item">
                                <a href="#" class="position-relative">Tops</a>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="position-relative">Bottoms</a>
                            </li>
                            <li class="menu-item menu-item-has-children megamenu-dropdown v2">
                                <a href="#" class="position-relative">Outerwear</a>
                                <div class="megamenu-wrapper">
                                    <div class="container">
                                        <div class="megamenu-inner">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>JEWELRY</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">All Jewelry</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">New Jewelry</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Necklaces</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>BAGS</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">Crossbody Bags</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Totes</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Shoulder Bags</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Bucket Bags</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>SPOTLIGHT ON</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">The Essential Collection</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Metallic Moments</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Statement Earrings</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>Gifts</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="#">Rhode Resort</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Sabina Musayev</a>
                                                            </li>
                                                            <li>
                                                                <a href="#">Winden</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="trending-items">
                                                        <div class="megamenu-heading">
                                                            <h3>Trending</h3>
                                                        </div>
                                                        <div class="product-box product-style-one">
                                                            <div class="product-image position-relative overflow-hidden">
                                                                <a href="#">
                                                                    <img src="assets/images/resources/product-img1-10.jpg" alt="Product">
                                                                </a>

                                                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                                                    <span class="swatch-label" title="S" data-term="Small">
                                                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                                                    </span>
                                                                    <span class="swatch-label" title="M" data-term="Medium">
                                                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                                                    </span>
                                                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                                                    </span>
                                                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                                                    </span>
                                                                </div>
                                                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                                                    <i class="icon-basket"></i>
                                                                </a>
                                                            </div>
                                                            <div class="product-content">
                                                                <h2 class="product-title">
                                                                    <a href="product-detail2.html">Plain Knitted Midi Skirt</a>
                                                                </h2>
                                                                <div class="variable-product-color">
                                                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>

                                                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>

                                                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                                                </div>
                                                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                                                    <div class="product-price">
                                                                        <span class="price">
                                                                            <ins>
                                                                                <span class="amount">
                                                                                    <bdi><span>$</span>140</bdi>
                                                                                </span>
                                                                            </ins>
                                                                            <del>
                                                                                <span class="amount">
                                                                                    <bdi><span>$</span>160</bdi>
                                                                                </span>
                                                                            </del>
                                                                        </span>
                                                                    </div>
                                                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                                                        <span>
                                                                            <svg viewBox="0 0 24 24" width="18" height="18">
                                                                                <path d="M21.984 9.234l-7.172-0.609-2.813-6.609-2.813 6.609-7.172 0.609 5.438 4.734-1.641 7.031 6.188-3.75 6.188 3.75-1.641-7.031zM12 15.422l-3.75 2.25 0.984-4.266-3.328-2.906 4.406-0.375 1.688-4.031 1.688 4.031 4.406 0.375-3.328 2.906 0.984 4.266z"></path>
                                                                            </svg>
                                                                        </span>
                                                                        <span class="count">12</span>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-4">
                                                    <div class="megamenu-heading">
                                                        <h3>Trending</h3>
                                                    </div>
                                                    <div class="discount-box d-flex align-items-center justify-content-end flex-wrap">
                                                        <div class="discount-image position-relative overflow-hidden">
                                                            <a href="#">
                                                                <img src="assets/images/resources/product-img1-33.jpg" alt="discount-image">
                                                            </a>
                                                            <div class="discount-percent position-absolute">-30%</div>
                                                        </div>
                                                        <div class="discount-image position-relative overflow-hidden">
                                                            <a href="#">
                                                                <img src="assets/images/resources/product-img1-34.jpg" alt="discount-image">
                                                            </a>
                                                            <div class="discount-percent position-absolute">-30%</div>
                                                        </div>
                                                        <div class="discount-image position-relative overflow-hidden">
                                                            <a href="#">
                                                                <img src="assets/images/resources/product-img1-35.jpg" alt="discount-image">
                                                            </a>
                                                            <div class="discount-percent position-absolute">-30%</div>
                                                        </div>
                                                        <div class="discount-image position-relative overflow-hidden">
                                                            <a href="#">
                                                                <img src="assets/images/resources/product-img1-36.jpg" alt="discount-image">
                                                            </a>
                                                            <div class="discount-percent position-absolute">-30%</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul class="sub-menu v2">
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="checkout.html" class="nav-link">Checkout</a>
                                    </li>

                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="cart.html">Cart</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="wishlist.html">Wishlist</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="404.html">404</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item menu-item-has-children megamenu-dropdown v2">
                                <a href="#" class="position-relative">Accessories</a>
                                <div class="megamenu-wrapper">
                                    <div class="container">
                                        <div class="megamenu-inner">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>Product Page</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="product-list.html">Style 1</a>
                                                            </li>
                                                            <li>
                                                                <a href="product-list2.html">Style 2</a>
                                                            </li>
                                                            <li>
                                                                <a href="product-list3.html">Style 3</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="megamenu-item">
                                                        <div class="megamenu-heading">
                                                            <h3>Shop Feature</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="404.html">404</a>
                                                            </li>
                                                            <li>
                                                                <a href="checkout.html">Checkout</a>
                                                            </li>
                                                            <li>
                                                                <a href="cart.html">Cart</a>
                                                            </li>
                                                            <li>
                                                                <a href="wishlist.html">Wishlist</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col">
                                                    <div class="megamenu-heading">
                                                        <h3>Product Detail Page</h3>
                                                    </div>
                                                    <ul class="menu-list d-inline-block">
                                                        <li>
                                                            <a href="product-detail.html">Style 1</a>
                                                        </li>
                                                        <li>
                                                            <a href="product-detail2.html">Style 2</a>
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="col-6">
                                                    <div class="trending-items">
                                                        <div class="megamenu-heading">
                                                            <h3>Trending</h3>
                                                        </div>
                                                        <div class="mega-product-wrapper d-flex align-items-center">
                                                            <div class="mega-product-box">
                                                                <div class="mega-product-image overflow-hidden">
                                                                    <a href="#">
                                                                        <img src="assets/images/resources/product-img1-31.jpg" alt="product-img">
                                                                    </a>
                                                                </div>
                                                                <div class="mega-product-content">
                                                                    <h4>
                                                                        <a href="#">New fashion Style</a>
                                                                    </h4>
                                                                </div>
                                                            </div>
                                                            <div class="mega-product-box">
                                                                <div class="mega-product-image overflow-hidden">
                                                                    <a href="#">
                                                                        <img src="assets/images/resources/product-img1-32.jpg" alt="product-img">
                                                                    </a>
                                                                </div>
                                                                <div class="mega-product-content">
                                                                    <h4>
                                                                        <a href="#">12-12 Sale</a>
                                                                    </h4>
                                                                </div>
                                                            </div>
                                                            <div class="mega-product-box">
                                                                <div class="mega-product-image overflow-hidden">
                                                                    <a href="#">
                                                                        <img src="assets/images/resources/product-img1-33.jpg" alt="product-img">
                                                                    </a>
                                                                </div>
                                                                <div class="mega-product-content">
                                                                    <h4>
                                                                        <a href="#">Winter Clothes</a>
                                                                    </h4>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <ul class="sub-menu v2">
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="product-list.html" class="nav-link">Product List</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="product-list2.html" class="nav-link">Product List 2</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="product-list3.html" class="nav-link">Product List 3</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="product-detail.html" class="nav-link">Product Detail</a>
                                    </li>
                                    <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                        <a href="product-detail2.html" class="nav-link">Product Detail 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="#" class="position-relative">Winter</a>
                            </li>
                            <li class="menu-item menu-item-has-children position-relative">
                                <a href="#" class="position-relative">Pages</a>
                                <ul class="sub-menu">
                                    <li class="menu-item position-relative">
                                        <a href="blog.html" class="nav-link">Blog List</a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="blogdetail.html" class="nav-link">Blog Detail</a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="about.html" class="nav-link">About US</a>
                                    </li>
                                    <li class="menu-item position-relative">
                                        <a href="login.html" class="nav-link">Login/Register</a>
                                    </li>
                                </ul>
                            </li>
                            <li class="menu-item">
                                <a href="contact.html" class="position-relative">Contact</a>
                            </li>
                        </ul>
                    </nav>
                    <div class="social-icons">
                        <ul class="d-flex align-items-center">
                            <li>
                                <a href="https://www.facebook.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                    <i class="fa-brands fa-facebook"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://www.twitter.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                    <i class="fa-brands fa-twitter"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://pk.linkedin.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                    <i class="fa-brands fa-linkedin"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="weekly_sale-wrapper">
                        <div class="sale-btn d-flex">
                            <i class="icon-flash"></i> Weekly Sale
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="header-sticky">
            <div class="container">
                <div class="header-sticky-inner d-flex align-items-center justify-content-between">
                    <div class="menu_bar">
                        <a href="#" class="mobile-menu-icon">
                            <div></div>
                            <div></div>
                            <div></div>
                        </a>
                    </div>
                    <div class="logo-wrapper logo">
                        <h1>
                            <a href="#" class="d-flex align-items-center">
                                <img src="assets/images/logo.png" alt="logo">Genzik
                            </a>
                        </h1>
                    </div>
                    <div class="navigation-wrapper d-flex justify-content-between">
                        <nav class="menu" id="nav-menu2">
                            <ul class="menu-main">
                                <li class="menu-item current-menu-item menu-item-has-children position-relative">
                                    <a href="javascript:void(0)" class="position-relative">Home </a>
                                    <ul class="sub-menu position-absolute">
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="index.html" class="nav-link">Home One</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="index2.html" class="nav-link">Home Two</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="index3.html" class="nav-link">Home Three</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item menu-item-has-children megamenu-dropdown">
                                    <a href="javascript:void(0)" class="position-relative">Clothes</a>
                                    <div class="megamenu-wrapper">
                                        <div class="container">
                                            <div class="megamenu-inner">
                                                <div class="row">
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>Everything</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">Activewear</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Intimates &amp; Loungewear</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Jumpsuits &amp; Rompers</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Matching Sets</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Swimwear</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Unisex</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>What’s Hot</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">Tops</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Blouses &amp; Shirts</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Tank Tops &amp; Camis</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Sweatshirt &amp; Hoodies</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>Featured Shop</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">Denim Dresses</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Denim Jackets</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Denim Jumpsuits</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Denim Shorts &amp; Skirts</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Denim Tops</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="sale-box text-center position-relative">
                                                            <h4 class="text-uppercase">40% off Your Purchase</h4>
                                                            <a href="product-list2.html" class="sale-box-link text-uppercase">Show Now</a>
                                                            <div class="sale-border position-absolute"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                                <li class="menu-item menu-item-has-children megamenu-dropdown v2">
                                    <a href="#" class="position-relative">Outerwear</a>
                                    <div class="megamenu-wrapper">
                                        <div class="container">
                                            <div class="megamenu-inner">
                                                <div class="row">
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>JEWELRY</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">All Jewelry</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">New Jewelry</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Necklaces</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>BAGS</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">Crossbody Bags</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Totes</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Shoulder Bags</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Bucket Bags</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>SPOTLIGHT ON</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">The Essential Collection</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Metallic Moments</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Statement Earrings</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>Gifts</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="#">Rhode Resort</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Sabina Musayev</a>
                                                                </li>
                                                                <li>
                                                                    <a href="#">Winden</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="trending-items">
                                                            <div class="megamenu-heading">
                                                                <h3>Trending</h3>
                                                            </div>
                                                            <div class="product-box product-style-one">
                                                                <div class="product-image position-relative overflow-hidden">
                                                                    <a href="#">
                                                                        <img src="assets/images/resources/product-img1-10.jpg" alt="Product">
                                                                    </a>

                                                                    <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                                                        <span class="swatch-label" title="S" data-term="Small">
                                                                            <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                                                        </span>
                                                                        <span class="swatch-label" title="M" data-term="Medium">
                                                                            <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                                                        </span>
                                                                        <span class="swatch-label" title="XL" data-term="Extra Large">
                                                                            <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                                                        </span>
                                                                        <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                                                            <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                                                        </span>
                                                                    </div>
                                                                    <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                                                        <i class="icon-basket"></i>
                                                                    </a>
                                                                </div>
                                                                <div class="product-content">
                                                                    <h2 class="product-title">
                                                                        <a href="product-detail2.html">Plain Knitted Midi Skirt</a>
                                                                    </h2>
                                                                    <div class="variable-product-color">
                                                                        <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                                                        <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>

                                                                        <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>

                                                                        <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                                                    </div>
                                                                    <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                                                        <div class="product-price">
                                                                            <span class="price">
                                                                                <ins>
                                                                                    <span class="amount">
                                                                                        <bdi><span>$</span>140</bdi>
                                                                                    </span>
                                                                                </ins>
                                                                                <del>
                                                                                    <span class="amount">
                                                                                        <bdi><span>$</span>160</bdi>
                                                                                    </span>
                                                                                </del>
                                                                            </span>
                                                                        </div>
                                                                        <div class="star-rating d-flex align-items-center overflow-hidden">
                                                                            <span>
                                                                                <svg viewBox="0 0 24 24" width="18" height="18">
                                                                                    <path d="M21.984 9.234l-7.172-0.609-2.813-6.609-2.813 6.609-7.172 0.609 5.438 4.734-1.641 7.031 6.188-3.75 6.188 3.75-1.641-7.031zM12 15.422l-3.75 2.25 0.984-4.266-3.328-2.906 4.406-0.375 1.688-4.031 1.688 4.031 4.406 0.375-3.328 2.906 0.984 4.266z"></path>
                                                                                </svg>
                                                                            </span>
                                                                            <span class="count">12</span>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-4">
                                                        <div class="megamenu-heading">
                                                            <h3>Trending</h3>
                                                        </div>
                                                        <div class="discount-box d-flex align-items-center justify-content-end flex-wrap">
                                                            <div class="discount-image position-relative overflow-hidden">
                                                                <a href="#">
                                                                    <img src="assets/images/resources/product-img1-33.jpg" alt="discount-image">
                                                                </a>
                                                                <div class="discount-percent position-absolute">-30%</div>
                                                            </div>
                                                            <div class="discount-image position-relative overflow-hidden">
                                                                <a href="#">
                                                                    <img src="assets/images/resources/product-img1-34.jpg" alt="discount-image">
                                                                </a>
                                                                <div class="discount-percent position-absolute">-30%</div>
                                                            </div>
                                                            <div class="discount-image position-relative overflow-hidden">
                                                                <a href="#">
                                                                    <img src="assets/images/resources/product-img1-35.jpg" alt="discount-image">
                                                                </a>
                                                                <div class="discount-percent position-absolute">-30%</div>
                                                            </div>
                                                            <div class="discount-image position-relative overflow-hidden">
                                                                <a href="#">
                                                                    <img src="assets/images/resources/product-img1-36.jpg" alt="discount-image">
                                                                </a>
                                                                <div class="discount-percent position-absolute">-30%</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="sub-menu v2">
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="checkout.html" class="nav-link">Checkout</a>
                                        </li>

                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="about.html">About Us</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="login.html">Login</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="404.html">404</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item menu-item-has-children megamenu-dropdown v2">
                                    <a href="#" class="position-relative">Accessories</a>
                                    <div class="megamenu-wrapper">
                                        <div class="container">
                                            <div class="megamenu-inner">
                                                <div class="row">
                                                    <div class="col">
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>Product Page</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="product-list.html">Style 1</a>
                                                                </li>
                                                                <li>
                                                                    <a href="product-list2.html">Style 2</a>
                                                                </li>
                                                                <li>
                                                                    <a href="product-list3.html">Style 3</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div class="megamenu-item">
                                                            <div class="megamenu-heading">
                                                                <h3>Shop Feature</h3>
                                                            </div>
                                                            <ul class="menu-list d-inline-block">
                                                                <li>
                                                                    <a href="404.html">404</a>
                                                                </li>
                                                                <li>
                                                                    <a href="checkout.html">Checkout</a>
                                                                </li>
                                                                <li>
                                                                    <a href="cart.html">Cart</a>
                                                                </li>
                                                                <li>
                                                                    <a href="wishlist.html">Wishlist</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                    <div class="col">
                                                        <div class="megamenu-heading">
                                                            <h3>Product Detail Page</h3>
                                                        </div>
                                                        <ul class="menu-list d-inline-block">
                                                            <li>
                                                                <a href="product-detail.html">Style 1</a>
                                                            </li>
                                                            <li>
                                                                <a href="product-detail2.html">Style 2</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                    <div class="col-6">
                                                        <div class="trending-items">
                                                            <div class="megamenu-heading">
                                                                <h3>Trending</h3>
                                                            </div>
                                                            <div class="mega-product-wrapper d-flex align-items-center">
                                                                <div class="mega-product-box">
                                                                    <div class="mega-product-image overflow-hidden">
                                                                        <a href="#">
                                                                            <img src="assets/images/resources/product-img1-31.jpg" alt="product-img">
                                                                        </a>
                                                                    </div>
                                                                    <div class="mega-product-content">
                                                                        <h4>
                                                                            <a href="#">New fashion Style</a>
                                                                        </h4>
                                                                    </div>
                                                                </div>
                                                                <div class="mega-product-box">
                                                                    <div class="mega-product-image overflow-hidden">
                                                                        <a href="#">
                                                                            <img src="assets/images/resources/product-img1-32.jpg" alt="product-img">
                                                                        </a>
                                                                    </div>
                                                                    <div class="mega-product-content">
                                                                        <h4>
                                                                            <a href="#">12-12 Sale</a>
                                                                        </h4>
                                                                    </div>
                                                                </div>
                                                                <div class="mega-product-box">
                                                                    <div class="mega-product-image overflow-hidden">
                                                                        <a href="#">
                                                                            <img src="assets/images/resources/product-img1-33.jpg" alt="product-img">
                                                                        </a>
                                                                    </div>
                                                                    <div class="mega-product-content">
                                                                        <h4>
                                                                            <a href="#">Winter Clothes</a>
                                                                        </h4>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <ul class="sub-menu v2">
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="product-list.html" class="nav-link">Product List</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="product-list2.html" class="nav-link">Product List 2</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="product-list3.html" class="nav-link">Product List 3</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="product-detail.html" class="nav-link">Product Detail</a>
                                        </li>
                                        <li class="menu-item menu-item-type-custom menu-item-object-custom">
                                            <a href="product-detail2.html" class="nav-link">Product Detail 2</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item">
                                    <a href="#" class="position-relative">Winter</a>
                                </li>
                                <li class="menu-item menu-item-has-children position-relative">
                                    <a href="#" class="position-relative">Pages</a>
                                    <ul class="sub-menu">
                                        <li class="menu-item position-relative">
                                            <a href="blog.html" class="nav-link">Blog List</a>
                                        </li>
                                        <li class="menu-item position-relative">
                                            <a href="blogdetail.html" class="nav-link">Blog Detail</a>
                                        </li>
                                        <li class="menu-item position-relative">
                                            <a href="about.html" class="nav-link">About US</a>
                                        </li>
                                        <li class="menu-item position-relative">
                                            <a href="login.html" class="nav-link">Login/Register</a>
                                        </li>
                                    </ul>
                                </li>
                                <li class="menu-item">
                                    <a href="contact.html" class="position-relative">Contact</a>
                                </li>
                            </ul>
                        </nav>   
                    </div>
                    <div class="header-action-items">
                        <ul class="d-flex align-items-center">
                            <li class="cart">
                                <a href="#" class="d-flex align-items-center" data-bs-toggle="offcanvas" data-bs-target="#cart-popup" aria-controls="cart-popup">
                                    <span class="d-inline-flex align-items-center justify-content-center position-relative">
                                        <i class="icon-basket"></i>
                                        <sup class="cart-nmbr d-inline-flex align-items-center justify-content-center position-absolute">1</sup>
                                    </span>
                                    <span>$14.00 (1 item)</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </header>


    <!-- Section Hero -->
    <section>
        <div class="hero-wrapper page-cover position-relative">
            <div class="container">
                <div class="hero-inner-wrapper">
                    <div class="hero-content text-center">
                        <h2 class="text-uppercase">Product Details</h2>
                        <div class="breadcrumb-wrapper">
                            <ol class="breadcrumb justify-content-center">
                                <li class="text-uppercase position-relative"><a href="#">Home</a></li>
                                <li class="text-uppercase position-relative"><a href="#">Fashion Clothes</a></li>
                                <li class="text-uppercase active">Product Details</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- Section Product Detail -->
    <section>
        <div class="product-detail-wrapper pd-t-120">
            <div class="container">
                <div class="product-detail-inner-wrapper">
                    <div class="row align-items-center">
                        <div class="col-lg-7 col-md-12 col-sm-12">
                            <div class="product-detail-images">
                                <div class="product-detail-nav">
                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail1.jpg" alt="product-img">
                                    </div>

                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail2.jpg" alt="product-img">
                                    </div>

                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail3.jpg" alt="product-img">
                                    </div>

                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail1.jpg" alt="product-img">
                                    </div>

                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail2.jpg" alt="product-img">
                                    </div>

                                    <div class="product-detail-mini-image">
                                        <img src="assets/images/resources/product-detail3.jpg" alt="product-img">
                                    </div>
                                </div>
                                <div class="product-detail-for">
                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>

                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>

                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>

                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>

                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>

                                    <div class="product-detail-big-image">
                                        <a href="#">
                                            <img src="assets/images/resources/product-detail4.jpg" alt="Product">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-5 col-md-12 col-sm-12">
                            <div class="product-detail-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title entry-title">Zipped Regent Tote Handbag</h2>
                                <div class="product-rating d-flex align-items-center flex-wrap">
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star-full icon-star2"></i>
                                            <i class="icon-star-full icon-star2"></i>
                                            <i class="icon-star-full icon-star2"></i>
                                            <i class="icon-star-full icon-star2"></i>
                                            <i class="icon-star-full icon-star2"></i>
                                        </span>
                                        <span class="count text-uppercase position-relative">24 Reviews</span>
                                    </div>
                                    <div class="creat-review">
                                        <a href="#" class="theme-btn d-inline-flex position-relative overflow-hidden">Write Review</a>
                                    </div>
                                </div>
                                <div class="product-size-wrapper d-flex align-items-center">
                                    <div class="size-lable">
                                        <h4 class="text-uppercase">Size:</h4>
                                    </div>
                                    <div class="swatches variable-product-sizes d-flex align-items-center justify-content-center">
                                        <span class="swatch-label" title="S" data-term="Small">
                                            <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                        </span>
                                        <span class="swatch-label" title="M" data-term="Medium">
                                            <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                        </span>
                                        <span class="swatch-label" title="XL" data-term="Extra Large">
                                            <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                        </span>
                                        <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                            <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                        </span>
                                    </div>
                                </div>
                                <div class="product-color-wrapper">
                                    <div class="color-lable">
                                        <h4 class="text-uppercase">Color:
                                            <span>Navy</span>
                                        </h4>
                                    </div>
                                    <div class="product-color-list d-flex align-items-center">
                                        <span class="active d-inline-flex align-items-center justify-content-center position-relative">#dd383c</span>

                                        <span class="d-inline-flex align-items-center justify-content-center position-relative">#ff9662</span>

                                        <span class="d-inline-flex align-items-center justify-content-center position-relative">#96ba37</span>

                                        <span class="d-inline-flex align-items-center justify-content-center position-relative">#c962ff</span>
                                    </div>
                                </div>
                                <div class="product-detail-price">
                                    <span class="price">
                                        <ins>
                                            <span class="amount">
                                                <bdi>
                                                    <span>$</span>140.00
                                                </bdi>
                                            </span>
                                        </ins>
                                        <del>
                                            <span class="amount">
                                                <bdi>
                                                    <span>$</span>140.00
                                                </bdi>
                                            </span>
                                        </del>
                                    </span>
                                </div>
                                <div class="product-quantity-btn">
                                    <div class="product-quantity">
                                        <div class="product-quantity">
                                            <input type="number" value="1" min="1" max="10" step="1">
                                        </div>
                                    </div>
                                    <div class="product-cart-wishlist d-flex align-items-center justify-content-between">
                                        <button class="theme-btn position-relative overflow-hidden d-flex align-items-center">
                                            <i class="icon-basket"></i> Add to Cart
                                        </button>
                                        <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center" data-toggle="tooltip" data-bs-placement="top" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist" data-bs-original-title="" title="">
                                            <i class="icon-like"></i>
                                        </a>
                                    </div>
                                </div>
                                <div class="size-guide">
                                    <h4>
                                        <a href="#" data-bs-toggle="modal" data-bs-target="#guide-popup">
                                            <img src="assets/images/resources/size.png" alt="size"> Size Guide
                                        </a>
                                    </h4>
                                    <p>Please look at the size guide before completing your order, as sizes vary from brand to brand.</p>
                                </div>
                                <div class="payment-options">
                                    <img src="assets/images/resources/bank-card2.png" alt="Pay Options">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="product-detail-tab style-one">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item position-relative" role="presentation">
                            <button class="nav-link active" id="description-tab" data-bs-toggle="tab" data-bs-target="#description" type="button" role="tab" aria-controls="description" aria-selected="true">Description</button>
                        </li>
                        <li class="nav-item position-relative" role="presentation">
                            <button class="nav-link" id="additional-tab" data-bs-toggle="tab" data-bs-target="#additional" type="button" role="tab" aria-controls="additional" aria-selected="false">Additional Information</button>
                        </li>
                        <li class="nav-item position-relative" role="presentation">
                            <button class="nav-link" id="shipping-tab" data-bs-toggle="tab" data-bs-target="#shipping" type="button" role="tab" aria-controls="shipping" aria-selected="false">Shipping &amp; Return</button>
                        </li>
                        <li class="nav-item position-relative" role="presentation">
                            <button class="nav-link" id="reviews-tab" data-bs-toggle="tab" data-bs-target="#reviews" type="button" role="tab" aria-controls="reviews" aria-selected="false">Reviews</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="description" role="tabpanel" aria-labelledby="description-tab">
                            <div class="product-description">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ve niam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum a dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est at nulla pariatur. Exce pteur sint occaecat cupidatat non prolaborum</p>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, a quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo con</p>
                                <ul class="detail-list">
                                    <li class="position-relative">Cami top, slim fitting</li>
                                    <li class="position-relative">Lace trim, adjustable shoulder straps</li>
                                    <li class="position-relative">Good stretch, unlined</li>
                                    <li class="position-relative">88% nylon 12% elastane</li>
                                    <li class="position-relative">Cold machine wash </li>
                                </ul>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="additional" role="tabpanel" aria-labelledby="additional-tab">
                            <div class="product-table">
                                <table>
                                    <tbody>
                                        <tr>
                                            <th class="label">Fabric:</th>
                                            <td>50% Polyester, 50% Cotton, Fleece</td>
                                        </tr>
                                        <tr>
                                            <th class="label">Size:</th>
                                            <td>Navy, Dark,BLack</td>
                                        </tr>
                                        <tr>
                                            <th class="label">Bottom:</th>
                                            <td>Quarter Zipper</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="shipping" role="tabpanel" aria-labelledby="shipping-tab">
                            <div class="ship-return-wrapper">
                                <div class="free-shipping">FREE SHIPPING when you spend 
                                    <span class="position-relative">over $50 USD!</span>
                                </div>
                                <div class="shipping-content">
                                    <h3>From USA:</h3>
                                    <p>Return within 30 days for an exchange, refund or gift card.
                                        Easy, sustainable returns available for select orders at a
                                    nearby Happy Returns bar or opt to print our label and ship.</p>
                                </div>
                                <div class="shipping-content">
                                    <h3>Free Exchange:</h3>
                                    <p>Select an item for exchange via our returns portal to avoid
                                    paying the return shipping cost!</p>
                                </div>
                                <div class="shipping-content">
                                    <h3>Refund:</h3>
                                    <p>Select a refund via our returns portal and $6.95 will be deducted
                                    from your refund for return processing fees.</p>
                                </div>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="reviews" role="tabpanel" aria-labelledby="reviews-tab">
                            <div class="product-tab-rating">
                                <div class="row">
                                    <div class="col-lg-8 col-md-12 col-sm-12">
                                        <div class="review-client-wrapper">
                                            <h3>Reviews</h3>
                                            <ol class="commentlist">
                                                <li>
                                                    <div class="comment">
                                                        <img src="assets/images/resources/author-img4.jpg" alt="Avatar">
                                                        <div class="comment-detail">
                                                            <div class="author-name d-flex align-items-center justify-content-between">
                                                                <h4 class="text-uppercase">Ella J. </h4>
                                                                <time datetime="2023-03-02T10:35:47+00:00">10/18/23</time>
                                                            </div>
                                                            <div class="star-rating">
                                                                <span>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                </span>
                                                            </div>
                                                            <div class="description">
                                                                <p>This shirt looks beautiful and the color was the same as the picture! it pairs well with
                                                                    these two skirts i bought and the shirt itself fits perfectly! i can definitely mix&amp;match
                                                                    these with many different clothes!
                                                                </p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="comment">
                                                        <img src="assets/images/resources/author-img5.jpg" alt="Avatar">
                                                        <div class="comment-detail">
                                                            <div class="author-name d-flex align-items-center justify-content-between">
                                                                <h4 class="text-uppercase">Ella J. </h4>
                                                                <time datetime="2023-03-02T10:35:47+00:00">10/18/23</time>
                                                            </div>
                                                            <div class="star-rating">
                                                                <span>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                </span>
                                                            </div>
                                                            <div class="description">
                                                                <p>this shoulder black top are absolutely stunning and stylish. It add a touch of elegance and  allure to any outfit.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                                <li>
                                                    <div class="comment">
                                                        <img src="assets/images/resources/author-img6.jpg" alt="Avatar">
                                                        <div class="comment-detail">
                                                            <div class="author-name d-flex align-items-center justify-content-between">
                                                                <h4 class="text-uppercase">Ella J. </h4>
                                                                <time datetime="2023-03-02T10:35:47+00:00">10/18/23</time>
                                                            </div>
                                                            <div class="star-rating">
                                                                <span>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                    <i class="icon-star-full icon-star2"></i>
                                                                </span>
                                                            </div>
                                                            <div class="description">
                                                                <p>this shoulder black top are absolutely stunning and stylish. It add a touch of elegance and  allure to any outfit.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </li>
                                            </ol>
                                            <div class="review-more text-center">
                                                <a href="#" class="load-more theme-btn style-stroke position-relative overflow-hidden">Load More Reviews</a>
                                            </div>
                                            <div class="review-form-wrapper">
                                                <h3>WRITE A REVIEW</h3>
                                                <div class="review-form-rating">
                                                    <label class="text-uppercase">Rating:</label>
                                                    <span>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                    </span>
                                                </div>
                                                <form class="d-flex align-items-center flex-wrap">
                                                    <div class="form-input-half">
                                                        <div class="contact-input">
                                                            <input type="tel" name="text" placeholder="Phone No" class="input-field">
                                                        </div>
                                                    </div>
                                                    <div class="form-input-half">
                                                        <div class="contact-input">
                                                            <input type="tel" name="text" placeholder="Phone No" class="input-field">
                                                        </div>
                                                    </div>
                                                    <div class="contact-message">
                                                        <textarea placeholder="Review"></textarea>
                                                    </div>
                                                    <button type="submit" class="theme-btn position-relative overflow-hidden">Submit Now</button>
                                                </form>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-4 col-md-12 col-sm-12">
                                        <div class="review-rating-box">
                                            <div class="review-rating-head">
                                                <div class="star-rating d-flex align-items-center justify-content-between">
                                                    <h5 class="actions-togglereviews">5.0 
                                                        <span class="text-uppercase">of 5 Stars</span>
                                                    </h5>
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                    </span>
                                                </div>
                                            </div>
                                            <div class="rating-count d-flex align-items-center justify-content-between">
                                                <div class="star-rating">
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                    </span>
                                                </div>
                                                <div class="rating-bar-wrapper d-flex align-items-center">
                                                    <div class="progress">
                                                        <div class="progress-bar w-79"></div>
                                                    </div>
                                                    <div class="count">
                                                        10
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="rating-count d-flex align-items-center justify-content-between">
                                                <div class="star-rating">
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                    </span>
                                                </div>
                                                <div class="rating-bar-wrapper d-flex align-items-center">
                                                    <div class="progress">
                                                        <div class="progress-bar w-34"></div>
                                                    </div>
                                                    <div class="count">
                                                        10
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="rating-count d-flex align-items-center justify-content-between">
                                                <div class="star-rating">
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                    </span>
                                                </div>
                                                <div class="rating-bar-wrapper d-flex align-items-center">
                                                    <div class="progress">
                                                        <div class="progress-bar w-10"></div>
                                                    </div>
                                                    <div class="count">
                                                        10
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="rating-count d-flex align-items-center justify-content-between">
                                                <div class="star-rating">
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                    </span>
                                                </div>
                                                <div class="rating-bar-wrapper d-flex align-items-center">
                                                    <div class="progress">
                                                        <div class="progress-bar w-0"></div>
                                                    </div>
                                                    <div class="count">
                                                        0
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="rating-count d-flex align-items-center justify-content-between">
                                                <div class="star-rating">
                                                    <span>
                                                        <i class="icon-star-full icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                        <i class="icon-star icon-star2"></i>
                                                    </span>
                                                </div>
                                                <div class="rating-bar-wrapper d-flex align-items-center">
                                                    <div class="progress">
                                                        <div class="progress-bar w-0"></div>
                                                    </div>
                                                    <div class="count">
                                                        0
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- Section Product -->
    <section>
        <div class="product-wrapper pd-t-120 pd-b-130">
            <div class="container">
                <div class="sec-tl text-center">
                    <span class="text-uppercase">Just for you</span>
                    <h2>Recent 
                        <span class="position-relative">Trends</span>
                    </h2>
                </div>
                <div class="row product-slider products">
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="100">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-9.jpg" alt="Product">
                                </a>
                                <div class="offer position-absolute">
                                    <span class="onsale discount-label d-inline-flex align-items-center justify-content-center">-
                                        <span>30</span>%
                                    </span>
                                </div>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Plain Knitted Midi Skirt</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>140</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>160</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">12</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="200">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-10.jpg" alt="Product">
                                </a>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Neon Windbreaker Jacket</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>120</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>110</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">15</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="300">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-11.jpg" alt="Product">
                                </a>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Ribbed Knit Crop Top</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>155</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>135</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">11</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="400">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-12.jpg" alt="Product">
                                </a>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Tie-Dye Cropped Hoodie</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>179</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>150</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">18</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="500">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-13.jpg" alt="Product">
                                </a>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Striped Ribbed Tank Top</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>167</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>152</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">13</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-12 col-md-12 col-sm-12" data-aos="fade-in-up" data-aos-duration="1000" data-aos-delay="600">
                        <div class="product-box product-style-one">
                            <div class="product-image position-relative overflow-hidden">
                                <a href="product-detail.html">
                                    <img src="assets/images/resources/product-img1-40.jpg" alt="Product">
                                </a>
                                <div class="action-buttons social-icons position-absolute">
                                    <ul>
                                        <li class="product-wishlist">
                                            <a href="wishlist.html" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-custom-class="product-actions-tooltip" data-bs-title="Add to wishlist">
                                                <i class="icon-like"></i>
                                            </a>
                                        </li>
                                        <li class="product-quickview">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-bs-target="#quickview-popup" data-bs-toggle="modal" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Quick View">
                                                <svg class="icon icon-view">
                                                    <use xlink:href="#icon-view"></use>
                                                </svg>
                                            </a>
                                        </li>
                                        <li class="product-compare">
                                            <a href="#" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden" data-toggle="tooltip" data-bs-placement="left" data-bs-title="Compare">
                                                <svg class="icon icon-compare">
                                                    <use xlink:href="#icon-compare"></use>
                                                </svg>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="swatches variable-product-sizes position-absolute d-flex align-items-center justify-content-center">
                                    <span class="swatch-label" title="S" data-term="Small">
                                        <a href="#" class="d-flex align-items-center justify-content-center">S</a>
                                    </span>
                                    <span class="swatch-label" title="M" data-term="Medium">
                                        <a href="#" class="d-flex align-items-center justify-content-center">M</a>
                                    </span>
                                    <span class="swatch-label" title="XL" data-term="Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XL</a>
                                    </span>
                                    <span class="swatch-label" title="XXL" data-term="Extra Extra Large">
                                        <a href="#" class="d-flex align-items-center justify-content-center">XXL</a>
                                    </span>
                                </div>
                                <a href="cart.html" class="product-cart add_to_cart_button position-absolute text-center theme-btn">
                                    <i class="icon-basket"></i>
                                </a>
                            </div>
                            <div class="product-content">
                                <p class="brand-name">BRAND: 
                                    <a href="product-list2.html">LIONESS</a>
                                </p>
                                <h2 class="product-title">
                                    <a href="product-detail.html">Sequin Bomber Jacket</a>
                                </h2>
                                <div class="variable-product-color">
                                    <a href="javascript:void(0);" class="switch-color enabled d-inline-flex align-items-center justify-content-between position-relative">#dd383c</a>
                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#ff9662</a>

                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#96ba37</a>

                                    <a href="javascript:void(0);" class="switch-color d-inline-flex align-items-center justify-content-between position-relative">#c962ff</a>
                                </div>
                                <div class="product-price-wrapper d-flex align-items-center justify-content-between">
                                    <div class="product-price">
                                        <span class="price">
                                            <ins>
                                                <span class="amount">
                                                    <bdi><span>$</span>99</bdi>
                                                </span>
                                            </ins>
                                            <del>
                                                <span class="amount">
                                                    <bdi><span>$</span>88</bdi>
                                                </span>
                                            </del>
                                        </span>
                                    </div>
                                    <div class="star-rating d-flex align-items-center overflow-hidden">
                                        <span>
                                            <i class="icon-star"></i>
                                        </span>
                                        <span class="count">05</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <footer class="style-one">
        <div class="footer-wrapper">
            <div class="footer-upper">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-md-12">
                            <div class="widget newsletter">
                                <h4 class="widget-title text-uppercase position-relative">Subscribe Newsletter</h4>
                                <p>subscribe email and Get exclusive news offers and updates</p>
                                <form action="#" class="newsletter-form position-relative">
                                    <input type="email" placeholder="Enter your email.">
                                    <button type="button" class="theme-btn position-absolute overflow-hidden">Subscribe</button>
                                </form>
                                <div class="ft-social-wrapper d-flex align-items-center">                                   
                                    <span>Follow Us:</span>
                                    <div class="social-icons">
                                        <ul class="d-flex align-items-center">
                                            <li>
                                                <a href="https://www.facebook.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                    <i class="fa-brands fa-facebook"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://www.twitter.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                    <i class="fa-brands fa-twitter"></i>
                                                </a>
                                            </li>
                                            <li>
                                                <a href="https://pk.linkedin.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                    <i class="fa-brands fa-linkedin"></i>
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-4">
                            <div class="widget">
                                <h4 class="widget-title text-uppercase position-relative">Need Help?</h4>
                                <ul class="menu">
                                    <li>
                                        <a href="#">Help</a>
                                    </li>
                                    <li>
                                        <a href="#">Track My Order</a>
                                    </li>
                                    <li>
                                        <a href="#">Delivery Information</a>
                                    </li>
                                    <li>
                                        <a href="#">Returns</a>
                                    </li>
                                    <li>
                                        <a href="#">Size Guide</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-4">
                            <div class="widget">
                                <h4 class="widget-title text-uppercase position-relative">Discover</h4>
                                <ul class="menu">
                                    <li>
                                        <a href="#">About Warehouse</a>
                                    </li>
                                    <li>
                                        <a href="#">Investor Relations</a>
                                    </li>
                                    <li>
                                        <a href="#">Slavery Statement</a>
                                    </li>
                                    <li>
                                        <a href="#">Sustainability</a>
                                    </li>
                                    <li>
                                        <a href="#">Sitemap</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-4 col-sm-4">
                            <div class="widget">
                                <h4 class="widget-title text-uppercase position-relative">Get The App</h4>
                                <p>Check out the best shopping apps.</p>
                                <div class="app-button d-flex">
                                    <a href="#">
                                        <img src="assets/images/resources/app-store.png" alt="App">
                                    </a>
                                    <a href="#">
                                        <img src="assets/images/resources/google-play.png" alt="App">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-middle">
                <div class="container">
                    <div class="ft-payment-card widget d-flex align-items-center justify-content-between flex-wrap">
                        <div class="card-discount">
                            <h5 class="d-flex align-items-center">
                                <i class="icon-brand-tag"></i> Use Card: Get 10% off Everything
                            </h5>
                        </div>
                        <div class="card-support">
                            <img src="assets/images/resources/bank-card.png" alt="Payment Methods">
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <div class="container">
                    <div class="ft-bottom widget d-flex align-items-center justify-content-between flex-wrap">
                        <div class="copyrights">
                            Copyright © <a href="#">2024 Genzik.</a> All Rights <a href="https://www.bootstrapmb.com">bootstrapMB</a>
                        </div>
                        <div class="bottom-menu">
                            <ul class="d-flex align-items-center">
                                <li class="position-relative">
                                    <a href="#">Terms of use</a>
                                </li>
                                <li class="position-relative">
                                    <a href="#">Privacy Policy</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>





    <!-- Popup Newsletter -->
    <div class="modal fade" id="Newsletter_Modal">
        <div class="modal-dialog modal-dialog-centered newsletter-modal">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="newsletter-wrapper d-flex align-items-center">
                        <div class="newsletter-image">
                            <img src="assets/images/resources/product-img1-3.jpg" alt="newsletter-img">
                        </div>
                        <div class="newsletter-content text-center">
                            <div class="newsletter-inner-content">
                                <h3 class="text-uppercase">Open a Store for free</h3>
                                <p>
                                    <span>Special Offer:</span> Start for free, then get your <span>first month for $1</span>
                                </p>
                                <form>
                                    <input type="text" placeholder="don't miss out this sale">
                                    <button type="button" class="theme-btn position-relative overflow-hidden">Start Now</button>
                                </form>
                                <div class="social-icons">
                                    <ul class="d-flex align-items-center justify-content-center">
                                        <li>
                                            <a href="https://www.facebook.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-facebook"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.twitter.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-twitter"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://pk.linkedin.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-linkedin"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.instagram.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-instagram"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.youtube.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-youtube"></i>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="https://www.pinterest.com/" class="d-inline-flex align-items-center justify-content-center position-relative overflow-hidden">
                                                <i class="fa-brands fa-pinterest"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <label class="remember-field d-flex align-items-center justify-content-center">
                                    <input name="rememberme-register" type="checkbox" id="rememberme-register">
                                    <span class="position-relative">Remember me</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Popup Search-->

    <div class="search-modal-wrapper modal fade" id="searchpopup">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="container">
                    <div class="search-modal">
                        <button type="button" class="btn-close close-search position-absolute" data-bs-dismiss="modal" aria-label="Close"></button>
                        <form action="#" method="get" role="search" class="search search-modal-form">
                            <div class="content-input">
                                <div class="field position-relative">
                                    <input class="search-input field-input" placeholder="Search Products" autocomplete="off" autocapitalize="off">
                                    <button class="search-button field-button position-absolute" aria-label="Search"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22">
                                        <path d="M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z"></path>
                                    </svg></button>
                                </div>
                            </div>
                            <div class="content-menu-search d-flex align-items-center flex-wrap">
                                <div class="title">Trending Search:</div>
                                <ul class="list-collection d-flex align-items-center overflow-auto">
                                    <li>
                                        <a href="#" class="d-inline-block text-center theme-btn style-stroke position-relative overflow-hidden">fashion</a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-inline-block text-center theme-btn style-stroke position-relative overflow-hidden">Clothes</a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-inline-block text-center theme-btn style-stroke position-relative overflow-hidden">New</a>
                                    </li>
                                    <li>
                                        <a href="#" class="d-inline-block text-center theme-btn style-stroke position-relative overflow-hidden">Trends</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Popup Cart -->

    <div class="mini-cart-wrapper offcanvas offcanvas-end" id="cart-popup">
        <div class="mini-cart-header">
            <h2 class="mini-cart-title position-relative text-uppercase" id="offcanvasLabel">Shopping Cart</h2>
        </div>
        <div class="widget-shopping-cart overflow-hidden position-relative d-flex">
            <div class="widget-shopping-cart-content d-flex overflow-hidden">
                <div class="widget-shopping-cart-body has-scrollbar position-relative">
                    <h3 class="item-count"><span>2 items</span></h3>
                    <ul class="cart-list">
                        <li class="mini-cart-item position-relative d-flex align-items-start">
                            <div class="mini-cart-item-btns d-flex align-items-center position-absolute">
                                <a href="#" class="remove-from-cart-button d-inline-flex align-items-center justify-content-center" rel="nofollow" data-toggle="tooltip" data-bs-placement="top" data-bs-title="Remove this item">
                                    <i class="fa-solid fa-xmark"></i>
                                </a>
                                <div class="cart-product-edit_variant d-inline-flex align-items-center justify-content-center" data-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit this item" data-bs-original-title="" title="">
                                    <svg class="icon icon-pen">
                                        <use xlink:href="#icon-pen"></use>
                                    </svg>
                                </div>
                            </div>
                            <div class="cart-product-img">
                                <a href="product-detail2.html">
                                    <img src="assets/images/resources/cart-img1.jpg" alt="product">
                                </a>
                            </div>
                            <div class="mini-cart-item-content">
                                <div class="cart-product-info_variant">
                                    <span>Bown / XL</span>
                                </div>
                                <h3 class="mini-cart-item-title"><a href="product-detail2.html">Plain Knitted Midi Skirt</a></h3>
                                <div class="product-price">
                                    <span class="price">
                                        <span class="amount">
                                            <bdi><span>$</span>19.85</bdi>
                                        </span>
                                    </span>
                                </div>
                                <div class="product-quantity js-quantity-selector">
                                    <input type="number" value="1" min="1" max="10" step="1">
                                </div>
                            </div>
                        </li>
                        <li class="mini-cart-item position-relative d-flex align-items-start">
                            <div class="mini-cart-item-btns d-flex align-items-center position-absolute">
                                <a href="#" class="remove-from-cart-button d-inline-flex align-items-center justify-content-center" rel="nofollow" data-toggle="tooltip" data-bs-placement="top" data-bs-title="Remove this item">
                                    <i class="fa-solid fa-xmark"></i>
                                </a>
                                <div class="cart-product-edit_variant d-inline-flex align-items-center justify-content-center" data-toggle="tooltip" data-bs-placement="top" data-bs-title="Edit this item" data-bs-original-title="" title="">
                                    <svg class="icon icon-pen">
                                        <use xlink:href="#icon-pen"></use>
                                    </svg>
                                </div>
                            </div>
                            <div class="cart-product-img">
                                <a href="product-detail2.html">
                                    <img src="assets/images/resources/cart-img1.jpg" alt="product">
                                </a>
                            </div>
                            <div class="mini-cart-item-content">
                                <div class="cart-product-info_variant">
                                    <span>Bown / XL</span>
                                </div>
                                <h3 class="mini-cart-item-title"><a href="product-detail2.html">Distressed Boyfriend Jeans</a></h3>
                                <div class="product-price">
                                    <span class="price">
                                        <span class="amount">
                                            <bdi><span>$</span>19.85</bdi>
                                        </span>
                                    </span>
                                </div>
                                <div class="product-quantity js-quantity-selector">
                                    <input type="number" value="1" min="1" max="10" step="1">
                                </div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="widget-shopping-cart-footer">
                    <table class="price-table">
                        <thead>
                            <tr class="cart-subtotal">
                                <th>Subtotal</th>
                                <td></td>
                                <td>$250.00</td>
                            </tr>
                        </thead>
                        <tfoot>
                            <tr class="order-total">
                                <th>Total</th>
                                <td></td>
                                <td><strong><span class="amount"><bdi><span>$</span>250.00</bdi></span></strong> </td>
                            </tr>
                        </tfoot>
                    </table>
                    <div class="cart-footer-bottom">
                        <div class="cart-conditions">
                            <p>Tax included and shipping calculated at checkout</p>
                            <label for="terms-and-conditions" class="terms-conditions">
                                <input id="terms-and-conditions" type="checkbox">
                                <span>I agree with the <a href="#">Terms & Conditions</a></span>
                            </label>
                        </div>
                        <div class="mini-cart-total-btns d-flex align-items-center justify-content-center flex-wrap">
                            <a href="cart.html" class="theme-btn style-stroke position-relative overflow-hidden">View Cart</a>
                            <a class="theme-btn position-relative overflow-hidden" href="checkout.html">Checkout</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <!-- Style Guide Popup -->


    <div class="guide-wrapper modal fade" id="guide-popup">
        <div class="modal-dialog modal-dialog-centered guide-modal modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-body">
                    <button type="button" class="btn-close position-absolute" data-bs-dismiss="modal" aria-label="Close"></button>
                    <div class="guide-head text-center">
                        <h3>Size Guide</h3>
                    </div>
                    <div class="guide-body">
                        <h4>Clothes Sizing Guide</h4>
                        <p>This guide will help you find the perfect fit for your jewelry. Remember, sizing can vary between brands, so it's always a good idea to refer to the specific size chart provided by the seller if available.</p>
                        <h4>Shirt</h4>
                        <p>Shirt should fit comfortably on your finger without feeling too loose or constricting. To measure your finger size, you can:</p>
                        <p>Use a ring sizer tool: These are available online or at most jewelry stores. Wrap the sizer tool around your finger until it fits snugly, then note the size indicated. Measure a ring that already fits you: Wrap a piece of paper or string around the base of your finger and mark the spot where it meets. Measure the distance between the marks in millimeters (mm) and use a ring size chart to find your corresponding size.</p>
                        <p>**Shirt Size Chart (Reference Only):**</p>
                        <table class="guide-table">
                            <thead>
                                <tr>
                                    <th>Size</th>
                                    <th>Millimeters(mm)</th>
                                </tr>
                            </thead> 
                            <tbody>
                                <tr>
                                    <td>8</td>
                                    <td>15.0</td>
                                </tr>
                                <tr>
                                    <td>9</td>
                                    <td>16.0</td>
                                </tr>
                                <tr>
                                    <td>10</td>
                                    <td>17.0</td>
                                </tr>
                                <tr>
                                    <td>11</td>
                                    <td>18.0</td>
                                </tr>
                                <tr>
                                    <td>12</td>
                                    <td>19.0</td>
                                </tr>
                                <tr>
                                    <td>13</td>
                                    <td>20.0</td>
                                </tr>
                                <tr>
                                    <td>14</td>
                                    <td>21.0</td>
                                </tr>
                                <tr>
                                    <td>15</td>
                                    <td>22.0</td>
                                </tr>
                            </tbody>                         
                        </table>
                        <h4>Shirt</h4>
                        <p>Shirt length can dramatically affect the look and feel of your outfit. Here's a guide to common necklace lengths:</p>
                        <ul>
                            <li>Shirt: 14-16 inches (35.5 - 40.6 cm) - Sits closely around the neck.</li>
                            <li>Paint: 17-19 inches (43.2 - 48.3 cm) - Falls just below the collarbone.</li>
                            <li>Hoodies: 20-24 inches (50.8 - 61.0 cm) - Rests on the bust line.</li>
                            <li>Bag: 26-28 inches (66.0 - 71.1 cm) - Reaches the sternum.</li>
                            <li>Long: 30 inches or more (76.2 cm+) - Can fall to the waist or even hip.</li>
                            <li>Consider your neck size and desired style when choosing a necklace length.</li>
                        </ul>
                        <h4>Shirt</h4>
                        <p>Use a ring sizer tool: These are available online or at most jewelry stores. Wrap the sizer tool around your finger until it fits snugly, then note the size indicated. Measure a ring that already fits you: Wrap a piece of paper or string around the base of your finger and mark the spot where it meets. Measure the distance between the marks in millimeters (mm) and use a ring size chart to find your corresponding size.</p>
                        <p>**Shirt Size Chart (Reference Only):**</p>
                        <table class="guide-table">
                            <thead>
                                <tr>
                                    <th>Size</th>
                                    <th>Millimeters(mm)</th>
                                </tr>
                            </thead> 
                            <tbody>
                                <tr>
                                    <td>8</td>
                                    <td>15.0</td>
                                </tr>
                                <tr>
                                    <td>9</td>
                                    <td>16.0</td>
                                </tr>
                                <tr>
                                    <td>10</td>
                                    <td>17.0</td>
                                </tr>
                                <tr>
                                    <td>11</td>
                                    <td>18.0</td>
                                </tr>
                                <tr>
                                    <td>12</td>
                                    <td>19.0</td>
                                </tr>
                            </tbody>                         
                        </table>
                        <h4>Shirt</h4>
                        <p>Use a ring sizer tool: These are available online or at most jewelry stores. Wrap the sizer tool around your finger until it fits snugly, then note the size indicated. Measure a ring that already fits you: Wrap a piece of paper or string around the base of your finger and mark the spot where it meets. Measure the distance between the marks in millimeters (mm) and use a ring size chart to find your corresponding size.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- scripts-->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/slick.min.js"></script>
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/bootstrap-input-spinner.js"></script>
    <script src="assets/js/select2.min.js"></script>
    <script src="assets/js/fancybox.js"></script>
    <script src="assets/js/aos.js"></script>
    <script src="assets/js/custom-script.js"></script>
    <!-- svg sprite-->
    <div class="svg-wrapper">
        <svg>

            <symbol id="icon-view" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                <circle cx="12" cy="12" r="3"></circle>
            </symbol>

            <symbol id="icon-compare" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="16 3 21 3 21 8"></polyline>
                <line x1="4" y1="20" x2="21" y2="3"></line>
                <polyline points="21 16 21 21 16 21"></polyline>
                <line x1="15" y1="15" x2="21" y2="21"></line>
                <line x1="4" y1="4" x2="9" y2="9"></line>
            </symbol>

            <symbol id="icon-pen" viewBox="0 0 24 24">
                <path d="M12 21h9c0.552 0 1-0.448 1-1s-0.448-1-1-1h-9c-0.552 0-1 0.448-1 1s0.448 1 1 1zM15.793 2.793l-12.5 12.5c-0.122 0.121-0.217 0.28-0.263 0.465l-1 4c-0.039 0.15-0.042 0.318 0 0.485 0.134 0.536 0.677 0.862 1.213 0.728l4-1c0.167-0.041 0.33-0.129 0.465-0.263l12.5-12.5c0.609-0.609 0.914-1.41 0.914-2.207s-0.305-1.598-0.914-2.207-1.411-0.915-2.208-0.915-1.598 0.305-2.207 0.914zM17.207 4.207c0.219-0.219 0.504-0.328 0.793-0.328s0.574 0.109 0.793 0.328 0.328 0.504 0.328 0.793-0.109 0.574-0.328 0.793l-12.304 12.304-2.115 0.529 0.529-2.115z"></path>
            </symbol>

            <symbol id="icon-list" viewBox="0 0 20 20">
                <path d="M14.4 9h-5.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h5.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM16.4 14h-7.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h7.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM8.6 6h7.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1h-7.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1zM5.4 9h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM5.4 14h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1zM5.4 4h-1.8c-0.552 0-0.6 0.447-0.6 1s0.048 1 0.6 1h1.8c0.552 0 0.6-0.447 0.6-1s-0.048-1-0.6-1z"></path>
            </symbol>

            <symbol id="icon-grid" viewBox="0 0 32 32">
                <path d="M8 12h4v-4h-4v4zM14 12h4v-4h-4v4zM20 8v4h4v-4h-4zM8 18h4v-4h-4v4zM14 18h4v-4h-4v4zM20 18h4v-4h-4v4zM8 24h4v-4h-4v4zM14 24h4v-4h-4v4zM20 24h4v-4h-4v4z"></path>
            </symbol>


        </svg>
    </div>



</body>

</html>
